<template>
	<view class="container">
			<view class="form-subtitle">
				<view class="form-subtitle-left">
					系统设置
				</view>
			</view>
			<view class="form-container">
					<view class="form-flex" @click="jump('/pages-landlord/settings/common')">
						<span class="form-label">通用设置</span>
						<span class="form-value">押金、交租日...<u-icon name="arrow-right" size="16rpx" color="#000" bold></u-icon></span>
					</view>
					<view class="form-flex" @click="jump('/pages-landlord/settings/contract')">
						<span class="form-label">合同设置</span>
						<span class="form-value">到期提前提醒<u-icon name="arrow-right" size="16rpx" color="#000" bold></u-icon></span>
					</view>
					<view class="form-flex" @click="jump('/pages-landlord/settings/invoice')">
						<span class="form-label">账单设置</span>
						<span class="form-value">自动生成、小数位…<u-icon name="arrow-right" size="16rpx" color="#000" bold></u-icon></span>
					</view>
					<view class="form-flex" @click="jump('/pages-landlord/settings/fee')">
						<span class="form-label">收费设置</span>
						<span class="form-value">除房租外的收费选项<u-icon name="arrow-right" size="16rpx" color="#000" bold></u-icon></span>
					</view>
					<view class="form-flex" @click="jump('/pages-landlord/settings/house')">
						<span class="form-label">户型设置</span>
						<span class="form-value" >自定义房间户型<u-icon name="arrow-right" size="16rpx" color="#000" bold></u-icon></span>
					</view>
					<view class="form-flex" @click="jump('/pages-landlord/settings/trash')">
						<span class="form-label">回收站</span>
						<span class="form-value">查看已删账单、合同等<u-icon name="arrow-right" size="16rpx" color="#000" bold></u-icon></span>
					</view>
					<view class="form-flex" @click="jump('/pages-landlord/settings/log')">
						<span class="form-label">登录日志</span>
						<span class="form-value">查看登录日志<u-icon name="arrow-right" size="16rpx" color="#000" bold></u-icon></span>
					</view>
			</view>
			
			<view class="form-subtitle">
				<view class="form-subtitle-left">
					联系客服
				</view>
			</view>
			<view class="form-container">
					<view class="form-flex">
						<span class="form-label">客服电话</span>
						<span class="form-value" @click="show = true">{{customerServiceHotline}}<u-icon name="arrow-right" size="16rpx" color="#000"></u-icon></span>
					</view>
					<view class="form-flex">
						<span class="form-label">客服QQ</span>
						<span class="form-value">{{customerServiceQQ}}</span>
					</view>
			</view>
			
			<!-- <view class="form-subtitle">
				<view class="form-subtitle-left">
					密码设置
				</view>
			</view>
			<view class="form-container">
					<view class="form-flex">
						<span class="form-label">重置密码</span>
						<span class="form-value"><u-icon name="arrow-right" size="16rpx" color="#000"></u-icon></span>
					</view>
			</view> -->
			
			<u-action-sheet :actions="list" @select="selectClick" :description="customerServiceHotline" :show="show" cancelText="取消" @close="show=false"> </u-action-sheet>
	</view>
</template>


<script>
	import { contractKf } from '@/api/part2.js'
	export default {
		data() {
			return {
				customerServiceHotline:'',
				customerServiceQQ:'',
				list: [ { name: '呼叫' } ],
				show: false
			}
		},
		onLoad() {
			this.contractKf()
		},
		methods:{
			contractKf(){
				contractKf().then(res=>{
					let data = res.data.data
					this.customerServiceHotline = data.phone
					this.customerServiceQQ = data.kf_qq
				})
			},
			selectClick(index){
				console.log(index)
				uni.makePhoneCall({
					phoneNumber: this.customerServiceHotline,
					success: () => {
						console.log('拨打电话成功');
					},
					fail: (err) => {
						console.log('拨打电话失败', err);
					}
				});
			},
			jump(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		padding: 0 32rpx;
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
		background: #F5F6FA;
		min-height: 100vh;
	}
	
	.form-subtitle {
		padding: 24rpx 40rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 700;
		font-size: 26rpx;
		color: #2A0C00;
		line-height: 36rpx;
	
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.form-container {
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.01);
		border-radius: 16rpx;
		padding: 18rpx 40rpx;
		margin-bottom: 20rpx;
	
		.form-flex {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16rpx;
			font-size: 28rpx;
		}
	
		.form-label {
			margin-right: 10rpx;
			color: #666666;
			line-height: 40rpx;
		}
		.form-value {
			text-align: right;
			color: #999999;
			display: flex;
			align-items: center;
			gap: 8rpx;
		}
	}
</style>